[学习笔记] JavaScript中的 this

感觉上篇文章还是三四天前写的，看看日期已经10天了。。时间过的真快！赶紧补篇，js中的this是我学习了但一直没来得及总结的，今天就简要说说 this 吧~

---

this简述

每个函数在被调用时都会自动取得两个特殊的对象：this 和 arguments，arguments 是一个类数组对象，包含着传入函数中的所有参数， this 引用的是函数据以执行的环境对象。

this 对象是在运行时基于函数的执行环境绑定的，它可能是全局对象或者其他的某个对象，随着函数的执行环境不同，this的值也会不一样。但是总有一个原则，那就是

this 指的是 调用函数的 那个对象。

还有另一个原则：当没有明确的调用函数的那个对象时，this指向全局对象global，浏览器模式下就是window了。

By default, this refers to the global object.

---

下面具体讲讲this 的指代原则。

this的指代原则

1. 函数直接被调用

此时函数属于全局性调用，其this代表全局对象global

var a = 5;

function test() {
    console.log(this.a);
}

test(); // 5

注意下面这种情况：

function f1(){
    console.log(this);
    function f2(){
        console.log(this);
    }
    f2();
}
f1();  // Window window

f2()输出的也是window，可见无论是在全局中直接被调用，还是内嵌在函数中被调用，只要是直接通过名字调用函数的，函数中的this在非严格模式下都是指向全局对象，而严格模式下就是undefined

2. 函数作为对象的方法调用

此时this指向这个对象。

function test() {
    console.log(this.a);
}

var obj = {};
obj.a = 5;
obj.m = test;
obj.m(); // 5

3. 函数作为构造函数调用

此时，this指向生成的新对象。

var a = 3; //全局变量a

function Test() {
    this.a = 5; // 对象属性a
}

var obj = new Test();
console.log(obj.a); // 5, 不是3！

4. 匿名函数中的this

匿名函数的执行环境具有全局性，因此，其this对象通常指向window。

var name = 'The window';

var obj = {
    name: 'My object',

    getName: function() {
        return function() {
            return this.name;
        };
    }
};

console.log(obj.getName()()); // 'The window'

---

设置this的值

1. call() / apply()

这两个方法的作用都是在特定的作用域中调用函数，从而设置了函数体内this 的值。
apply() 方法接收两个参数：第一个参数是函数要运行的作用域，即对象。第二个参数是参数数组，既可以是Array的实例，也可以是arguments对象。call()和apply()的作用相同，二者唯一的差别就是接收参数的方式不同，即在使用call()方法时，传递给函数的参数必须逐个列举出来。
通过例子看call()/apply()是如何改变this值的。

window.color = 'red';
var o = {color: 'blue'};

function sayColor() {
    console.log(this.color);
}
sayColor.call(o); // blue

sayColor.call(window); // red
sayColor.call(this); // red
sayColor(); // red

2. bind()

该方法创建一个函数的实例，其this的值会被绑定到传给bind()函数的值。创建的新函数无论在哪里调用，this的值都是固定的。

window.color = 'red';
var o = {color: 'blue'};

function sayColor() {
    console.log(this.color);
}
var newSaycolor = sayColor.bind(o);
newSayColor(); // blue，全局中调用，结果仍为blue

需要注意的是，支持bind()方法的浏览器有 IE9+ 、Firefox 4+ 、 Safari 5.1+ 、 Opera 12+ 和 Chrome。

eval()

使用 eval() 方法时，this 指向哪里呢？
答案很简单，看谁在调用 eval() 方法，eval()中的this就是调用者的执行环境中的 this 。

---

这是我关于this的一点理解，欢迎大家拍砖~

参考文章：

Javascript的this用法
深入浅出 JavaScript 中的 this
Javascript中this关键字详解